<template>
  <div>
    <van-nav-bar
      title="图书商城"
      left-arrow
      placeholder
      fixed
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="puloading" @refresh="onRefresh">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="item in slides"
          :key="item.id"
          @click="goodsClick(item.id)"
        >
          <img :src="item.img_url" />
        </van-swipe-item>
      </van-swipe>
      <van-row class="sales-box">
        <van-col
          span="6"
          v-for="item in sales"
          :key="item.id"
          @click="goodsClick(item.id)"
        >
          <img :src="item.cover_url" alt="" />
          <p>{{ item.title }}</p>
        </van-col>
      </van-row>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-tabs
          v-model:active="active"
          offset-top="46px"
          sticky
          color="#42b983"
          title-active-color="#42b983"
          @click="tabsClick"
        >
          <van-tab :title="item" v-for="(item, index) in tabs" :key="index">
            <van-row class="tabs-list">
              <van-col
                span="12"
                v-for="item in tabsList"
                :key="item.id"
                class="tab-container"
              >
                <div @click="goodsClick(item.id)">
                  <img v-lazy="item.cover_url" alt="" />
                </div>
                <div class="goods-info">
                  <p>{{ item.title }}</p>
                  <span class="price"><small>￥</small>{{ item.price }} </span>
                  <span class="collect">
                    <van-icon
                      name="star"
                      color="red"
                      @click="collectClick(item.id)"
                    />{{ item.collects_count }}</span
                  >
                </div>
              </van-col>
            </van-row>
          </van-tab>
        </van-tabs>
      </van-list>
    </van-pull-refresh>
    <back-top></back-top>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs } from 'vue'
import { getHomeList } from '../../network/home'
import { collectAClear } from '../../network/collect'
import { Toast } from 'vant'
import BackTop from '../../components/common/BackTop.vue'
export default {
  components: {
    BackTop
  },
  setup () {
    const router = useRouter()
    const state = reactive({
      queryInfo: {
        page: 1,
        sales: 0,
        recommend: 0,
        new: 0
      },
      slides: [],
      sales: [],
      tabs: ['畅销', '新书', '精选'],
      active: 0,
      tabsList: [],
      loading: false,
      finished: false,
      puloading: false
    })
    const goBack = () => {
      router.go(-1)
    }
    onMounted(() => {
      getHomeList(state.queryInfo).then(res => {
        console.log(res)
        state.slides = res.slides
        state.sales = res.goods.data.slice(0, 4)
        // state.tabsList = res.goods.data
      })
    })
    const getHomeListFu = (data) => {
      state.loading = true
      if (state.active === 0) {
        state.queryInfo.sales = 1
      } else if (state.active === 1) {
        state.queryInfo.new = 1
      } else if (state.active === 2) {
        state.queryInfo.recommend = 1
      }
      getHomeList(data).then(res => {
        if (state.queryInfo.page > 1) {
          state.tabsList.push(...res.goods.data)
          console.log(state.active)
        } else {
          state.tabsList = res.goods.data
        }
        console.log(state.tabsList)
        state.queryInfo.page++
        state.loading = false
        state.puloading = false
        if (res.goods.data.length === 0) {
          state.finished = true
        }
      })
    }
    const tabsClick = () => {
      onRefresh()
    }
    const onLoad = () => {
      getHomeListFu(state.queryInfo)
    }
    const onRefresh = () => {
      state.tabsList = []
      state.queryInfo.page = 1
      state.queryInfo.sales = state.queryInfo.recommend = state.queryInfo.new = 0
      onLoad()
    }
    const goodsClick = (goodsId) => {
      router.push({ path: '/detail', query: { id: goodsId } })
    }
    const collectClick = (goodsId) => {
      collectAClear(goodsId).then(res => {
        console.log(res)
        Toast('已加入收藏')
      })
    }
    return {
      ...toRefs(state),
      goBack,
      tabsClick,
      onLoad,
      onRefresh,
      goodsClick,
      collectClick
    }
  }
}
</script>
<style scoped lang="less">
.sales-box {
  padding: 15px 10px 30px;
  border-bottom: 8px solid #eee;
  font-size: 12px;
  img {
    padding: 10px;
    height: 95px;
  }
}
.tabs-list {
  margin-top: 15px;
}
.tab-container {
  position: relative;
  padding-bottom: 35px;
  font-size: 12px;
  img {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
  }
  p {
    margin-bottom: 5px;
  }
}
.goods-info {
  position: absolute;
  bottom: 5px;
  width: 100%;
}
.price {
  margin-right: 10px;
  color: red;
}
</style>
